<template>
  <div class="xin-jia-po">
    <LoadingComponent v-slot="{ loadingFlag }" class="xin-jia-po-bananer">
      <img
        v-for="it in bananerDates"
        :key="it.apor_id"
        :src="'http://www.shxw114.com:9527/' + it.apor_nav"
        v-if="loadingFlag"
      />
    </LoadingComponent>
    <div class="to">
      <div class="tuijian13">
        <h3>预科院校推荐</h3>
      </div>
      <div class="lxyk_cont">
        <div class="gj_yxshoulist">
          <LoadingComponent
            class="gj_yxshoulist1"
            v-for="it in ModAporeinterDates"
            :key="it.inter_id"
            v-slot="{ loadingFlag }"
          >
            <img
              :src="'http://www.shxw114.com:9527/' + it.inter_logo"
              v-if="loadingFlag"
            />
          </LoadingComponent>
        </div>
      </div>
      <div class="country_floor4">
        <div class="country_floor4_title">
          <h2>海外院校推荐</h2>
          <span>more+</span>
        </div>
        <div class="country_floor4_list">
          <LoadingComponent
            v-slot="{ loadingFlag }"
            class="country_floor4_list1"
            v-for="it in ModAporeoverDates"
            :key="it.over_id"
          >
            <img
              :src="'http://www.shxw114.com:9527/' + it.over_logo"
              v-if="loadingFlag"
            />
            <p class="wzycslh">{{ it.over_name }}</p>
          </LoadingComponent>
        </div>
      </div>
      <div class="xinjiapo">
         <img src="/img/新加坡.ff34be45.jpg" />
      </div>
    </div>
    <FooterTwo />
    <InquiryHk />
  </div>
</template>
<script setup>
import {
  ModAporeimgGet,
  ModAporeinterGet,
  ModAporeoverGet,
} from "../../server/index.js";
import FooterTwo from "../../components/FooterTwo/index.vue";
import InquiryHk from "../inquiryHk/index.vue";
import { ref, reactive } from "@vue/reactivity";
const ModAporeinterDates = ref({});
const bananerDates = ref({});
const ModAporeoverDates = ref({});
const axios_ = async (v) => {
  const { data } = await v();
  return data;
};
(async (v) => {
  bananerDates.value = await axios_(ModAporeimgGet);
  ModAporeinterDates.value = await axios_(ModAporeinterGet);
  ModAporeoverDates.value = await axios_(ModAporeoverGet);
})();
</script>
<style scoped>
.xin-jia-po {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.xin-jia-po-bananer {
  width: 100%;
  height: 8rem;
}
.xin-jia-po-bananer img {
  width: 100%;
  height: 100%;
}
.xinjiapo {
    width: 100%;
    height: auto;
    margin-top: 0.8rem;
}
.xinjiapo img {
    width: 100%;
    height: 8rem;
}
</style>